<template>
  <el-form
    ref="basicFormRef"
    :model="state.basicForm"
    :rules="state.basicFormRules"
    label-width="120"
  >
    <div style="font-size: 16px; font-weight: 700">基础信息</div>
    <el-divider></el-divider>
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="state.basicForm.name" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="活动副标题" prop="summary">
      <el-input v-model="state.basicForm.summary" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="商户" prop="merchant_id">
      <CommonSelect
        v-model="state.basicForm.merchant_id"
        :options="state.merchants"
        label-key="name"
        value-key="id"
        placeholder="请输入"
        @change="onMerchantChange"
      ></CommonSelect>
    </el-form-item>
    <el-form-item label="活动时间" prop="date">
      <el-date-picker
        class="w100"
        v-model="state.basicForm.date"
        type="datetimerange"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :disabled-date="disabledDate"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="报名截止时间" prop="deadline">
      <el-date-picker
        v-model="state.basicForm.deadline"
        type="datetime"
        placeholder="请输入"
        :disabled-date="disabledDate"
      ></el-date-picker>
    </el-form-item>
    <!-- <el-form-item label="联系人姓名" prop="contact_name">
      <el-input v-model="state.basicForm.contact_name" placeholder="请输入"></el-input>
    </el-form-item> -->
    <el-form-item label="客服电话" prop="contact_phone">
      <el-input
        v-model="state.basicForm.contact_phone"
        maxlength="11"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item label="活动简介" prop="intro">
      <el-input
        v-model="state.basicForm.intro"
        type="textarea"
        maxlength="500"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <el-form-item label="注意事项" prop="attention">
      <el-input
        v-model="state.basicForm.attention"
        type="textarea"
        maxlength="250"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
    <div style="font-size: 16px; font-weight: 700">详细信息</div>
    <el-divider></el-divider>
    <el-form-item label="活动地区" prop="area_ids">
      <AreaSelect class="w100" v-model="state.basicForm.area_ids" />
    </el-form-item>
    <el-form-item label="详细地址" prop="address">
      <el-input v-model="state.basicForm.address" type="textarea" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="地点坐标" prop="coordinate">
      <el-input
        v-model="state.basicForm.coordinate"
        placeholder="请输入坐标，经纬度逗号分隔"
      ></el-input>
      <div>
        <el-button type="text" @click="goSelectPoint">去选择</el-button>
      </div>
    </el-form-item>
    <el-form-item label="活动封面" prop="cover">
      <CommonUpload
        ref="coverUploadRef"
        list-type="picture-card"
        :limit="1"
        @change="onCoverChange"
      >
        <el-icon><ele-Plus /></el-icon>
      </CommonUpload>
    </el-form-item>
    <el-form-item label="活动图片" prop="banners">
      <CommonUpload ref="bannerUploadRef" list-type="picture-card" :file-list="state.banners">
        <el-icon><ele-Plus /></el-icon>
      </CommonUpload>
    </el-form-item>
    <el-form-item label="活动海报" prop="poster">
      <CommonUpload ref="posterUploadRef" list-type="picture-card" :limit="1" @change="onPosterChange">
        <el-icon><ele-Plus /></el-icon>
      </CommonUpload>
    </el-form-item>
    <el-form-item label="退款规则" prop="cancel_rule">
      <el-input
        v-model="state.basicForm.cancel_rule"
        type="textarea"
        placeholder="请输入"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="BasicInfo">
import { reactive, onMounted, ref } from 'vue';
import { FormInstance } from 'element-plus';
import CommonSelect from '/@/components/common-select/index.vue';
import { readAllMerchant } from '/@/api/merchant';
import { createRequiredRule, getPreviewUrl } from '/@/utils';
import AreaSelect from '/@/components/area-select/index.vue';
import CommonUpload from '/@/components/common-upload/index.vue';
import { get } from 'lodash';
import dayjs from 'dayjs';

const basicFormRef = ref<FormInstance>();
const bannerUploadRef = ref<InstanceType<typeof CommonUpload>>();
const coverUploadRef = ref<InstanceType<typeof CommonUpload>>();
const posterUploadRef = ref<InstanceType<typeof CommonUpload>>();

const state = reactive({
  merchants: [],
  basicForm: {
    name: '',
    summary: '',
    merchant_id: '',
    deadline: '',
    date: [],
    contact_name: '',
    contact_phone: '',
    area_ids: [],
    area_names: [],
    address: '',
    coordinate: '',
    longitude: '',
    latitude: '',
    cover: null,
    banners: null,
    poster: null,
    cancel_rule: '',
    attention: '',
    intro: ''
  },
  basicFormRules: {
    name: createRequiredRule(),
    summary: createRequiredRule(),
    date: createRequiredRule('', 'array'),
    deadline: createRequiredRule('', 'date'),
    address: createRequiredRule(),
    contact_name: createRequiredRule(),
    contact_phone: createRequiredRule(),
    merchant_id: createRequiredRule(),
    area_ids: createRequiredRule('', 'array'),
    coordinate: createRequiredRule(),
    cover: createRequiredRule(),
    poster: createRequiredRule(),
    cancel_rule: createRequiredRule(),
    intro: createRequiredRule()
  },
  coverList: [],
  banners: [],
  tempId: null
});

const getMerchants = async () => {
  const { data } = await readAllMerchant({ page: 1, pageSize: 1000 });
  state.merchants = data.list;
};

const onMerchantChange = (value: string) => {
  const merchant = state.merchants.find((item) => item.id === value);
  if (merchant) {
    state.basicForm.contact_name = merchant.contact_name;
    state.basicForm.contact_phone = merchant.contact_phone;
  }
};

const disabledDate = (date: Date) => {
  return dayjs().isAfter(date);
};

onMounted(() => {
  getMerchants();
});

const onCoverChange = (file: any, response: any) => {
  state.basicForm.cover = response?.data?.url || '';
};

const onPosterChange = (file: any, response: any) => {
  state.basicForm.poster = response?.data?.url
}
  
const getFieldsValue = () => {
  const { basicForm } = state;
  const { coordinate, date, ...rest } = basicForm;
  const [latitude, longitude] = coordinate.split(',');
  const values = {
    ...rest,
    longitude,
    latitude,
    start_date: get(date, '0'),
    end_date: get(date, '1'),
    banners: bannerUploadRef.value.normalizeFileList()
  };
  console.log('basicInfo', values);
  return values;
};

const setFieldsValue = (values: any) => {
  state.basicForm = {
    ...values,
    area_ids: values.area_ids?.map((o: string) => Number(o)),
    date: [values.start_date, values.end_date],
    coordinate: `${values.latitude},${values.longitude}`
  };

  bannerUploadRef.value.setFileList(values.banners);
  coverUploadRef.value.setFileList([
    {
      name: values.cover,
      url: getPreviewUrl(values.cover)
    }
  ]);
  posterUploadRef.value.setFileList([
    {
      name: values.poster,
      url: getPreviewUrl(values.poster)
    }
  ]);
};

const goSelectPoint = () => {
  window.open('https://lbs.qq.com/getPoint/');
};

// 暴露变量
defineExpose({
  validate: () => basicFormRef.value.validate(),
  getFieldsValue,
  setFieldsValue
});
</script>

<style scoped lang="scss">
.add-contract-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
  }
}

.form-wrap {
  width: 600px;
  margin: 20px auto 0;
}

.payment-term {
  margin-bottom: 16px;
}
</style>
